<template>
  <div class="box">
    <div class="list">
      <div class="list-item">
        <div class="item-left">
          <i class="el-icon-document"></i>
        </div>
        <div class="item-right">
            <p>文章</p>
            <h2>{{dataList.articleTotalCount}}</h2>
        </div>
      </div>
      <div class="list-item">
        <div class="item-left">
          <i class="el-icon-folder-opened"></i>
        </div>
        <div class="item-right">
            <p>分类</p>
            <h2>{{dataList.categoryTotalCount}}</h2>
        </div>
      </div>
      <div class="list-item">
        <div class="item-left">
          <i class="el-icon-price-tag"></i>
        </div>
        <div class="item-right">
            <p>标签</p>
            <h2>{{dataList.tagTotalCount}}</h2>
        </div>
      </div>
      <div class="list-item">
        <div class="item-left">
          <i class="el-icon-view"></i>
        </div>
        <div class="item-right">
            <p>浏览量</p>
            <h2>{{dataList.pvTotalCount}}</h2>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {Panel} from '../../units/api.js'
export default {
    data(){
        return{
            dataList:{}
        }
    },
    created(){
        this.getList()
    },
    methods:{
        async getList(){
            let res = await Panel()
            console.log(res);
            this.dataList = res.data.data
            
        }
    }
};
</script>

<style scoped>
.list{
    display: flex;
}
.list-item{
    margin-right:10px ;
    padding: 20px;
    background-color: white;
    border: 1px solid f2f2f2;
    display: flex;

}
.item-left{
    font-size: 25px;
    line-height: 50px;
    width: 50px;
    height: 50px;
    background-color: #f4f4f4;
    border-radius: 25px;
}
.item-right{
    margin-left: 10px;
}
</style>